<template>
  <div
    class="markgingBox"
    ref="fullscreenElement"
    :style="{ background: backgroundColor }"
  >
    <!-- 图片提示 -->
    <div class="imageAttention">点击移动可拖拽图片，鼠标滚轮缩放</div>
    <div class="topHeadcontent">
      <div class="selectboxNumber">
        <img src="../../assets/images/marknew/select.png" alt="" />
        <span style="color: #ffffff">{{ pageTitle }}</span>
        <!-- <el-select
          v-model="mytasklistid"
          placeholder="请选择"
          @change="inputSelect"
          :popper-append-to-body="false"
          readonly
          unselectable="on"
        >
          <el-option
            v-for="item in tasklisttop"
            :key="taskcardObject.id + '-' + item.id"
            :label="
              item.projectName +
              '/' +
              item.examName +
              '-' +
              item.questionNumbers
            "
            :value="item.id"
          >
          </el-option>
        </el-select> -->
      </div>
      <div class="dqprogressList">
        当前进度：{{ questionProgress }} / {{ questionTotal }}
      </div>
      <div class="fullscreenquite">
        <p @click="toggleFullscreen">
          <img src="../../assets/images/marknew/fullscreen.png" alt="" />
          全屏(F11)
        </p>
        <span @click="gobackyj">退出</span>
      </div>
    </div>
    <!-- 图片显示 -->
    <!-- v-loading="taskimgIshow" -->
    <div class="content" ref="imagewidhtlist">
      <div class="content_left" id="content_left">
        <!-- <LoadingView :title="loadingtitle" v-if="loadingIshow"></LoadingView> -->
        <div>
          <!-- 键盘数字放大 -->
          <!-- <div class="boxInputvalue" v-if="inputvalue || inputvalue < 0">
						{{ inputvalue }}
					</div> -->
          <div
            class="boxInputvalue"
            v-if="
              inputvalue !== null &&
              inputvalue !== undefined &&
              inputvalue !== ''
            "
          >
            {{ inputvalue }}
          </div>
          <div
            class="mainPage"
            v-if="quntuIshow"
            @mouseleave.stop="onmouseleaveHandle"
          >
            <div
              class="watchMap"
              :style="{ width: paramWidth + 'px', height: paramHeight + 'px' }"
              v-if="keydownActive == 2"
            >
              <div
                class="imgBox"
                ref="maskBox"
                @mousedown.stop="onmousedownHandle"
              >
                <div
                  class="divimage"
                  :style="{
                    width: imgW + 'px',
                    height: imgH + 'px',
                    top: top + 'px',
                    left: left + 'px',
                    transform: scale,
                  }"
                >
                  <!-- <img v-if="!splicing" :src="$imgUrl+cardreverse" alt="" @click.stop="stepAddtjnum" ref="imgWh" @load="onImageLoad(index)" /> -->
                  <!-- <img v-else v-for="(src,index) in taskcardObject.questionUrls" :src="src" alt="" @click.stop="stepAddtjnum" ref="imgWh" @load="onImageLoad(index)" /> -->
                  <img
                    v-for="(src, index) in taskcardObject.questionUrls"
                    :key="taskcardObject.id + '-' + index"
                    :src="src"
                    alt=""
                    @click.stop="stepAddtjnum"
                    ref="imgWh"
                    @load="onImageLoad(index)"
                  />
                </div>
              </div>
            </div>
            <div
              class="watchMap"
              :style="{ width: paramWidth + 'px', height: paramHeight + 'px' }"
              v-else
            >
              <div class="imgBox" ref="maskBox" @mousedown="onmousedownHandle">
                <div
                  class="divimage"
                  :style="{
                    width: imgW + 'px',
                    height: imgH + 'px',
                    top: top + 'px',
                    left: left + 'px',
                    transform: scale,
                  }"
                >
                  <!-- <img v-if="!splicing" :src="$imgUrl+cardreverse" alt="" ref="imgWh" @load="onImageLoad(index)" />
									<img v-else v-for="(src,index) in cardlist" :src="$imgUrl+src" alt="" ref="imgWh" @load="onImageLoad(index)" /> -->
                  <img
                    v-for="(src, index) in taskcardObject.questionUrls"
                    :key="taskcardObject.id + '-' + index"
                    :src="src"
                    alt=""
                    ref="imgWh"
                    @load="onImageLoad(index)"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="mainPage" @mouseleave="onmouseleaveHandle" v-else>
            <div
              class="watchMap"
              :style="{ width: paramWidth + 'px', height: paramHeight + 'px' }"
              v-if="keydownActive == 2"
            >
              <div
                class="imgBox"
                ref="maskBox"
                @mousedown.stop="onmousedownHandle"
              >
                <div
                  class="divimage1"
                  :style="{
                    width: imgW + 'px',
                    height: imgH + 'px',
                    top: top + 'px',
                    left: left + 'px',
                    transform: scale,
                  }"
                >
                  <img
                    v-for="(src, index) in taskcardObject.questionUrls"
                    :key="taskcardObject.id + '-' + index"
                    :src="src"
                    alt=""
                    @click.stop="stepAddtjnum"
                    ref="imgWh"
                    @load="onImageLoad(index)"
                    style="display: block; margin: 0 auto"
                  />
                </div>
              </div>
            </div>
            <div
              class="watchMap"
              :style="{ width: paramWidth + 'px', height: paramHeight + 'px' }"
              v-else
            >
              <div
                class="imgBox"
                ref="maskBox"
                @mousedown.stop="onmousedownHandle"
              >
                <div
                  class="divimage1"
                  :style="{
                    width: imgW + 'px',
                    height: imgH + 'px',
                    top: top + 'px',
                    left: left + 'px',
                    transform: scale,
                  }"
                >
                  <img
                    v-for="(src, index) in taskcardObject.questionUrls"
                    :key="taskcardObject.id + '-' + index"
                    :src="src"
                    alt=""
                    ref="imgWh"
                    @load="onImageLoad(index)"
                    style="display: block; margin: 0 auto"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 点击加数字 -->
        <div ref="stepDiv">
          <p
            class="stepDiv"
            v-for="item in stepNumber"
            :key="taskcardObject.id + '-' + item"
            :style="{ left: item.tranLeft, top: item.tranTop }"
          >
            {{ item.scorenum }}
          </p>
        </div>
      </div>
    </div>
    <!-- 左侧菜单 -->
    <VueDragResize
      :isDraggable="true"
      :w="84"
      :h="300"
      :sticks="[]"
      :x="25"
      :y="120"
      :parent-limitation="true"
      :parentW="parentWidth"
      :parentH="parentHeight"
      @dragging="handleDragging"
      @dragstop="handleDragStop"
      @activated="handleActivated"
      @clicked="handleClicked"
    >
      <div class="leftnavMenu" v-if="isDragging">
        <!-- <div v-if="!dragIshow" style="position: absolute;left:0;top:0;background:#fff;width:100%;height:100%;z-index:1000;"></div> -->
        <b></b>
        <ul>
          <li
            @click="imgScaleHandle(0.25)"
            :style="{ color: backgroundColor == '#333333' ? '#ffffff' : '' }"
          >
            <span v-if="backgroundColor == '#333333'">
              <img src="../../assets/images/marknew/big1.png" width="20" />
            </span>
            <span v-else>
              <img src="../../assets/images/marknew/big.png" width="20" />
            </span>
            放大
          </li>
          <li
            @click="imgScaleHandle(-0.25)"
            :style="{ color: backgroundColor == '#333333' ? '#ffffff' : '' }"
          >
            <span v-if="backgroundColor == '#333333'">
              <img src="../../assets/images/marknew/small1.png" width="20" />
            </span>
            <span v-else>
              <img src="../../assets/images/marknew/small.png" width="20" />
            </span>
            缩小
          </li>
          <li
            class="backgroundclassColor"
            :style="{ color: backgroundColor == '#333333' ? '#ffffff' : '' }"
            @click="qhcolor"
          >
            <div class="backgroundset">
              <span v-if="backgroundColor == '#333333'">
                <img
                  src="../../assets/images/marknew/backgroud1.png"
                  width="20"
                  class="backgroundcircle"
                />
                <i :style="{ background: backgroundColor }"></i>
              </span>
              <span v-else>
                <img
                  src="../../assets/images/marknew/backgroud.png"
                  width="20"
                  class="backgroundcircle"
                />
                <i :style="{ background: backgroundColor }"></i>
              </span>
              背景色
            </div>
            <div class="secondbox" v-if="backgroundColorIshow">
              <p
                v-for="item in backgroundColorlist"
                :key="taskcardObject.id + '-' + item.color"
                @click.stop="backgroundClick(item.color)"
                style="color: #5b6371"
              >
                <em :style="{ background: item.color }"></em>
                {{ item.name }}
              </p>
            </div>
          </li>
          <!-- updownpinjie :class="quntuIshow?'updownpinjie':''"-->
          <li
            @click="buttonqt"
            :style="{ color: backgroundColor == '#333333' ? '#ffffff' : '' }"
            :class="quntuIshow ? 'updownpinjie' : ''"
          >
            <span v-if="backgroundColor == '#333333'">
              <img src="../../assets/images/marknew/upda1.png" width="20" />
            </span>
            <span v-else>
              <img src="../../assets/images/marknew/upda.png" width="20" />
            </span>
            {{ quntuIshow ? "左右拼接" : "上下拼接" }}
          </li>
          <!-- <li @click="answerClick" :style="{color:backgroundColor=='#333333'?'#ffffff':''}">
							<span v-if="backgroundColor=='#333333'">
								<img src="../../assets/images/marknew/answer1.png" width="20">
							</span>
							<span v-else>
								<img src="../../assets/images/marknew/answer.png" width="20">
							</span>
							参考答案
						</li> -->
        </ul>
      </div>
      <div class="leftnavMenu" v-else>
        <!-- <div v-if="!dragIshow" style="position: absolute;left:0;top:0;background:#fff;width:100%;height:100%;z-index:1000;"></div> -->
        <b></b>
        <ul>
          <li :style="{ color: backgroundColor == '#333333' ? '#ffffff' : '' }">
            <span v-if="backgroundColor == '#333333'">
              <img src="../../assets/images/marknew/big1.png" width="20" />
            </span>
            <span v-else>
              <img src="../../assets/images/marknew/big.png" width="20" />
            </span>
            放大
          </li>
          <li :style="{ color: backgroundColor == '#333333' ? '#ffffff' : '' }">
            <span v-if="backgroundColor == '#333333'">
              <img src="../../assets/images/marknew/small1.png" width="20" />
            </span>
            <span v-else>
              <img src="../../assets/images/marknew/small.png" width="20" />
            </span>
            缩小
          </li>
          <li
            class="backgroundclassColor"
            :style="{ color: backgroundColor == '#333333' ? '#ffffff' : '' }"
          >
            <div class="backgroundset">
              <span v-if="backgroundColor == '#333333'">
                <img
                  src="../../assets/images/marknew/backgroud1.png"
                  width="20"
                  class="backgroundcircle"
                />
                <i :style="{ background: backgroundColor }"></i>
              </span>
              <span v-else>
                <img
                  src="../../assets/images/marknew/backgroud.png"
                  width="20"
                  class="backgroundcircle"
                />
                <i :style="{ background: backgroundColor }"></i>
              </span>
              背景色
            </div>
            <div class="secondbox" v-if="backgroundColorIshow">
              <p
                v-for="(item, index) in backgroundColorlist"
                :key="taskcardObject.id + '-' + index"
                style="color: #5b6371"
              >
                <em :style="{ background: item.color }"></em>
                {{ item.name }}
              </p>
            </div>
          </li>
          <!-- updownpinjie :class="quntuIshow?'updownpinjie':''"-->
          <li
            :style="{ color: backgroundColor == '#333333' ? '#ffffff' : '' }"
            :class="quntuIshow ? 'updownpinjie' : ''"
          >
            <span v-if="backgroundColor == '#333333'">
              <img src="../../assets/images/marknew/upda1.png" width="20" />
            </span>
            <span v-else>
              <img src="../../assets/images/marknew/upda.png" width="20" />
            </span>
            {{ quntuIshow ? "左右拼接" : "上下拼接" }}
          </li>
          <!-- <li @click="answerClick" :style="{color:backgroundColor=='#333333'?'#ffffff':''}">
							<span v-if="backgroundColor=='#333333'">
								<img src="../../assets/images/marknew/answer1.png" width="20">
							</span>
							<span v-else>
								<img src="../../assets/images/marknew/answer.png" width="20">
							</span>
							参考答案
						</li> -->
        </ul>
      </div>
    </VueDragResize>
    <!-- 右侧菜单 positionX v-if="isHovered" @mouseleave="handleMouseLeave"-->
    <div
      v-show="isHovered"
      @mouseenter="handleMouseEnters"
      @mouseleave="handleMouseLeaves"
    >
      <div
        class="boxsclider"
        :style="{ left: dragXscoll + 'px', top: dragYscoll + 'px' }"
        v-if="!footerrightnavIshow"
      >
        <img src="../../assets/images/marknew/scale.png" alt="" />
        <div class="block">
          <el-slider
            v-model="sliderValue"
            @change="updateDivScale"
            :show-tooltip="false"
          ></el-slider>
        </div>
      </div>
    </div>
    <!-- <div class="block" :style="{left:dragXscoll+'px',top:dragYscoll+'px'}" v-if="!footerrightnavIshow">
			<el-slider v-model="sliderValue" @change="updateDivScale" :show-tooltip="false"></el-slider>
		   <el-slider
			 v-model="sliderValue"
			 height="200px"
			 @change="updateDivScale"
			 :show-tooltip="false">
		   </el-slider>
		 </div> - -->
    <VueDragResize
      :isDraggable="true"
      :w="260"
      :h="500"
      :sticks="[]"
      :x="resizeX"
      :y="resizeY"
      :parent-limitation="true"
      :parentW="parentWidth"
      :parentH="parentHeight"
      @dragging="handleDragging1"
      @dragstop="handleDragStop1"
      @clicked="handleClicked1"
    >
      <div
        class="boxparent"
        @mouseenter="handleMouseEnter"
        @mouseleave="handleMouseLeave"
      >
        <div class="rightnavMenuBox" v-if="!footerrightnavIshow">
          <div class="rightnavMenu" :style="divStyle">
            <b class="gzcolor"></b>
            <el-select
              v-model="keydownActive"
              placeholder="请选择"
              @change="keyinputbox"
              :style="{ width: selectWidth + 'px' }"
              @visible-change="updateSelectWidth"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in keywordTablist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <!-- <div class="allscoreprogress">
							<span>满分{{taskcardObject.score}}分</span>
							<p>当前进度：{{readvolume}}/{{totalvolume}}</p>
						</div> -->
            <!-- 打分方式三种 -->
            <div class="stepbcbox" v-if="keydownActive == 0">
              <div class="stepbcboxlist">
                <div>
                  打分步长
                  <el-select
                    v-model="stepvalue"
                    placeholder="请选择"
                    @change="selectstepvale"
                    style="width: 53px; height: 25px"
                    :popper-append-to-body="false"
                    :disabled="stepvalue == '—' ? true : false"
                  >
                    <el-option
                      v-for="item in steplist"
                      :key="taskcardObject.id + '-' + item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </div>
                <el-switch
                  :width="switchwidth"
                  v-model="autoSubmit"
                  inactive-text="自动提交"
                >
                </el-switch>
              </div>
              <!-- //得分板 -->
              <div class="scoreStep">
                <!-- 阻止按钮连续提交 -->
                <div :class="buttondisabled1 === 1 ? 'displaynone' : ''"></div>
                <ul>
                  <li
                    v-for="item in steplistBox"
                    :data-item="item"
                    :key="taskcardObject.id + '-' + item"
                  >
                    {{ item }}
                  </li>
                </ul>
              </div>
            </div>
            <div class="addScorejs" v-if="keydownActive == 2">
              <p>选择加减分分值后点击卷面需要标记处即可</p>
              <div class="stepButton stepButtonColorRed">
                <b>加分方式：</b>
                <span :class="stepActive == 0 ? 'hover' : ''" @click="step(0)"
                  >+0.5</span
                >
                <span :class="stepActive == 1 ? 'hover' : ''" @click="step(1)"
                  >+1</span
                >
                <span :class="stepActive == 2 ? 'hover' : ''" @click="step(2)"
                  >+2</span
                >
              </div>
              <div class="stepButton stepButtonColorGreen">
                <b>减分方式：</b>
                <span :class="stepActive == 3 ? 'hover' : ''" @click="step(3)"
                  >-0.5</span
                >
                <span :class="stepActive == 4 ? 'hover' : ''" @click="step(4)"
                  >-1</span
                >
                <span :class="stepActive == 5 ? 'hover' : ''" @click="step(5)"
                  >-2</span
                >
              </div>
            </div>
            <div class="ninelist" v-if="keydownActive == 1">
              <!-- v-for="item in nineList" -->
              <div class="scoreStep">
                <ul>
                  <li @click="nineClick('0')">0</li>
                  <li @click="nineClick('1')">1</li>
                  <li @click="nineClick('2')">2</li>
                  <li @click="nineClick('3')">3</li>
                  <li @click="nineClick('4')">4</li>
                  <li @click="nineClick('5')">5</li>
                  <li @click="nineClick('6')">6</li>
                  <li @click="nineClick('7')">7</li>
                  <li @click="nineClick('8')">8</li>
                  <li @click="nineClick('9')">9</li>
                  <li>
                    <el-button
                      @click="nineClick('.5')"
                      :disabled="buttonDisabled"
                      >.5</el-button
                    >
                  </li>
                  <li @click="nineDel" class="deleteColor">
                    <img
                      src="../../assets/images/marknew/delete.png"
                      width="14"
                    />
                  </li>
                </ul>
              </div>
            </div>
            <!-- 打分框. -->
            <div class="scoreButtonset" style="position: relative">
              <!-- v-if="!autoSubmit" -->
              <!-- <div v-show="autoSubmit" style="background:#000;position:absolute;left:15px;top:15px;width:132px;height:31px;z-index:2;opacity: 0;" @click="handleDisabledClick"></div> -->
              <el-input
                v-model="inputvalue"
                placeholder="打分框"
                ref="myInput"
                :disabled="autoSubmit"
                @keyup.native="proving"
                @keyup.enter.native="keyDown"
              ></el-input>
              <p
                class="scorePset scorepbackground1"
                @click="autosubmitmf('0', 'lf')"
              >
                零
              </p>
              <p
                class="scorePset scorepbackground2"
                @click="autosubmitmf(allscore, 'mf')"
              >
                满
              </p>
              <p class="scorepbackground3" @click="reviewHp">回评</p>
              <p
                class="scorepbackground4"
                style="cursor: pointer"
                @click="bjpaper"
              >
                设问题卷
              </p>
              <p class="scorepbackground5" @click="nineDel">清空得分</p>
            </div>
            <div class="submitskipbox">
              <!-- <button @click="skip" class="submitskip">跳过</button> -->
              <div class="submitbuttonWidth submitbuttongray" v-if="autoSubmit">
                提交并继续
              </div>
              <el-button
                class="submitbuttonWidth submitbuttonBlue"
                v-else
                @click="scoreSet1"
                :disabled="buttondisabled1 === 1 ? false : true"
                >提交并继续</el-button
              >
            </div>
            <div class="footerqhdiv" @click="footernavClick">
              <span
                >切换至底部<img
                  src="../../assets/images/marknew/jt1.png"
                  alt=""
              /></span>
            </div>
          </div>
        </div>
      </div>
    </VueDragResize>
    <!-- 设为问题卷 -->
    <div class="messagebox1" v-if="carderrorIshow">
      <div class="messageContent1">
        <h3>
          <p><i class="el-icon-warning"></i>设问题卷</p>
          <i class="el-icon-close" @click="carderrorIshow = false"></i>
        </h3>
        <div class="messagecontentts1">
          <p>设置问题卷后，该试卷可能存在已阅题成绩作废，是否继续标记？</p>
          <el-radio-group v-model="carderrorname">
            <el-radio
              v-for="item in dict.type.exception_exam_questions"
              :label="item.value"
              :key="taskcardObject.id + '-' + item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
          <!-- <ul>
						<li v-for="(item,index) in cardError" :class="index==carderrorClass?'hover':''" @click="errorcardReason(item,index)">{{item}}</li>
					</ul> -->
        </div>
        <div class="buttonSet">
          <span @click="carderrorishowfalse">取消</span>
          <span @click="sureButton">确认</span>
        </div>
      </div>
    </div>
    <!-- 底部打分情况 -->
    <div class="footerScore" v-if="footerrightnavIshow">
      <b class="footerscoredz"></b>
      <span class="addscoretitle">给分板</span>
      <b class="youyibutton" @click="footernavClick1" style="margin-right: 10px"
        >展开</b
      >
      <el-input
        class="manfenelinput"
        v-model="inputvalue"
        :placeholder="'满分' + allscore + '分'"
        @keyup.native="proving"
        @keyup.enter.native="keyDown"
      ></el-input>
      <p class="scorePset scorepbackground1" @click="autosubmitmf('0', 'lf')">
        零
      </p>
      <p
        class="scorePset scorepbackground2"
        @click="autosubmitmf(allscore, 'mf')"
      >
        满
      </p>
      <p class="scorepbackground4" style="cursor: pointer" @click="bjpaper">
        设问题卷
      </p>
      <p class="scorepbackground3" @click="reviewHp">回评</p>
      <!-- <button @click="skip" class="submitskip">跳过</button> -->
      <el-button
        class="submitbuttonWidth submitbuttonBlue"
        @click="scoreSet1"
        :disabled="buttondisabled1 === 1 ? false : true"
        >提交并继续</el-button
      >
    </div>
    <!-- <messageBox :messageInfo="messageInfo" @sureButton="sureButton"></messageBox> -->
    <!-- 修正 -->
    <!-- <div class="messagebox" v-if="correctIshow">
			<div class="messageContent">
				<h3>抽查修正</h3>
				<div class="messagecontentts">您评阅的试卷已被抽查修正！</div>
				<div class="buttonSet">
					<span @click="correctcancel">关闭</span>
				</div>
			</div>
		</div> -->
    <!-- 阅完卷 setlist.tasknum==setlist.alltasknum-->
    <div class="successMarkingBox" v-if="tasknumIshow">
      <div class="smbContent">
        <span>当前试题，阅卷已完成！感谢您的评阅。</span>
        <b @click="closeLinkMarklist">关闭</b>
      </div>
    </div>
    <!-- 阅卷过程中未拿到答题卡提示框 -->
    <div class="nodefaultcardBox" v-if="nodefalutcardIshow">
      <div class="nodefaultContent">
        <span>尊敬的评阅教师，题卡还未上传或还在处理中，请适当休息下~</span>
        <b @click="nodefalutcardClose">关闭</b>
      </div>
    </div>
    <Reviewlist :taskcontent="taskcontent" v-if="taskcontentIshow"></Reviewlist>
  </div>
</template>

<script>
// import navTop from "../../components/head.vue"
// import messageBox from "../../components/messagebox.vue"
// import { getCardList,setMarkScore,mytaskList,getcardNumber,questionRelease,getcardNumber1,getTaskNum} from '../../request/api.js'
// import {encrypt,decrypt} from '../../utils/cryptojs'
// import ToastText from '../../components/toast.vue'
// import ToastText1 from '../../components/toast1.vue'
// import LoadingView from '../../components/loading.vue'
import {
  teacherreviewlist,
  teacherReviewAssignment,
  editabnormal,
  reviewListdate,
  statsReviewprogress,
  questionCardTeacher
} from "@/api/mark/mark.js";
import VueDragResize from "vue-drag-resize";
import Reviewlist from "../../components/mark/reviewlist.vue";
export default {
  dicts: ["exception_exam_questions"],
  data() {
    return {
      // 倒计时参数
      curStartTime: "",
      day: "0",
      hour: "00",
      min: "00",
      second: "00",
      uid: null,
      showtext: false,
      input: 0,
      inputvalue: "",
      showIs: false,
      markingHabit: false,
      result: [],
      messageInfo: {
        title: "标记试卷",
        content: `请确认该份试卷是否存在<span>空白、模糊不清或扫描异常</span>等无法正常阅卷情况，标记试卷后该试卷可能会被<b>记0分</b>！`,
        messageIsshow: false,
        buttonTitle: "确认标记",
      },
      nineList: ["0", "1", "2", "3", "4", "5", "6", "7", "8", ".5", "9"],
      num: 0,
      answerIshow: false,
      correctIshow: false,
      splicing: true,
      paperCon: {},
      listcons: [],
      cardlist: [],
      allscore: "",
      sourceid: "",
      flagurl: "",
      tasktype: "",
      userInfomation: {},
      scoreAttention: false,
      toastText: "",
      isToast: false,
      tasklist: [],
      setlist: {},
      scoreAttentiontitle: "",
      questionlist: [],
      value: "",
      groupid: "",
      navid: "",
      tasknumIshow: false,
      buttonDisabled: false,
      flag: 0,
      screenWidth: "",
      stepActive: -1,
      addStep: "",
      stepNumber: [],
      tranLeft: 0, // 向左偏移
      tranTop: 0, // 向右偏移
      imgBigshow: false,
      center_scrollTop: 0,
      keywordTablist: [
        { name: "给分板", id: 0 },
        { name: "数字键盘", id: 1 },
        { name: "加减给分", id: 2 },
      ],
      keydownActive: 0,
      scrollX: 0,
      scrollY: 0,
      cardreverse: "",
      carbj: [],
      quntuIshow: true,
      buttondisabled1: 1,
      totalvolume: 0,
      readvolume: 0,
      autoSubmit: true,
      cardError: [
        "学科错误",
        "题号错误",
        "图像不完整",
        "超出作答区",
        "字迹看不清",
        "其他",
      ],
      carderrorClass: -1,
      carderrorname: "",
      carderrorIshow: false,
      imgW: 0,
      imgH: 0,
      deg: 0,
      top: 0,
      left: 0,
      scale: "scale(0.6)",
      size: 0,
      mousewheelevt: null,
      width: 0,
      height: 0,
      switchwidth: 32,
      nodefalutcardIshow: false,
      loadingIshow: false,
      loadingtitle: "",
      changeValue: "",
      changeNum: "",
      flagsourceid: "",

      backgroundColor: "#f5f5f5",
      sliderValue: 50, // 初始滑块值
      divStyle: {
        transform: "scale(0.6)", // 初始缩放样式
        transformOrigin: "100% 0%",
      },
      selectWidth: 90,
      backgroundColorlist: [
        {
          name: "浅灰",
          color: "#f5f5f5",
        },
        {
          name: "护眼",
          color: "#E3F2E6",
        },
        {
          name: "浅蓝",
          color: "#E3E8F2",
        },
        {
          name: "浅黄",
          color: "#E3E8F2",
        },
        {
          name: "浅红",
          color: "#F2E3E3",
        },
        {
          name: "暗夜",
          color: "#333333",
        },
      ],
      backgroundColorIshow: false,
      footerrightnavIshow: false,
      toastText1: "",
      isToast1: false,
      imagesDimensions: [],

      isDragging: true,
      dragY: 120,
      dragX: 0,
      dragXscoll: 0,
      dragYscoll: 95,
      maxWidth: window.innerWidth - 100, // 最大宽度（窗口宽度减去一些边距）
      maxHeight: window.innerHeight - 100, // 最大高度（窗口高度减去一些边距）

      parentWidth: 0,
      parentHeight: 0,
      paramWidth: null,
      paramHeight: null,
      resizeX: 0,
      resizeY: 120,
      isHovered: false, // 初始状态为隐藏

      taskcontent: {},
      taskIndex: 0,
      taskCardcontent: [],
      taskcardObject: {},
      steplist: [],
      stepvalue: 1,
      steplistBox: [],
      taskimgIshow: false,
      tasklisttop: [],
      mytasklistid: 0,
      questionProgress: 0,
      questionTotal: 0,
      taskcontentIshow: false,

      startTime: null,
      score: null,
      initialdragXscoll: null,
      initialdragYscoll: null,

      getCardTime: null,
      getCarding: false,
    };
  },
  created() {},
  async mounted() {
    //默认滑块的位置
    const scale = 0.9 + this.sliderValue / 500;
    // 更新div的缩放样式
    this.divStyle.transform = `scale(${scale})`;

    let screenwidth =
      document.documentElement.scrollWidth || document.body.scrollWidth;
    this.resizeX = screenwidth - 260;
    this.dragXscoll = screenwidth - 260;
    this.dragYscoll = 95;
    this.dragWidth = window.innerWidth;
    this.dragHeight = window.innerHeight;
    this.parentWidth = window.innerWidth;
    this.parentHeight = window.innerHeight;
    window.addEventListener("resize", this.updatePositionOnResize);

    this.paramWidth = window.innerWidth;
    this.paramHeight = window.innerHeight - 56;
    this.reviewlistget();
    this.taskcontent = JSON.parse(sessionStorage.getItem("taskContent"));
    this.mytasklistid = this.taskcontent.id;

    await this.getProgressBox(
      this.taskcontent.examId,
      this.taskcontent.assignmentConfigId
    );

    if (this.questionProgress == this.questionTotal) {
      this.tasknumIshow = true;
      return;
    }

    if (sessionStorage.getItem("tasklist")) {
      this.taskCardcontent = JSON.parse(sessionStorage.getItem("tasklist"));
      this.taskcardObject = JSON.parse(sessionStorage.getItem("tasklist"))[
        this.taskIndex
      ];
      this.stepfunction(
        JSON.parse(sessionStorage.getItem("tasklist"))[this.taskIndex]
          .fullScore,
        Number(
          JSON.parse(sessionStorage.getItem("tasklist"))[this.taskIndex]
            .stepSize &&
            JSON.parse(sessionStorage.getItem("tasklist"))[this.taskIndex]
              .stepSize != null
            ? JSON.parse(sessionStorage.getItem("tasklist"))[this.taskIndex]
                .stepSize
            : 1
        )
      );
      this.allscore = JSON.parse(sessionStorage.getItem("tasklist"))[
        this.taskIndex
      ].fullScore;
      this.stepfullScore(
        JSON.parse(sessionStorage.getItem("tasklist"))[this.taskIndex]
          .fullScore,
        Number(
          JSON.parse(sessionStorage.getItem("tasklist"))[this.taskIndex]
            .stepSize &&
            JSON.parse(sessionStorage.getItem("tasklist"))[this.taskIndex]
              .stepSize != null
            ? JSON.parse(sessionStorage.getItem("tasklist"))[this.taskIndex]
                .stepSize
            : 1
        )
      );

      this.stepvalue =
        JSON.parse(sessionStorage.getItem("tasklist"))[this.taskIndex]
          .stepSize &&
        JSON.parse(sessionStorage.getItem("tasklist"))[this.taskIndex]
          .stepSize != null
          ? JSON.parse(sessionStorage.getItem("tasklist"))[this.taskIndex]
              .stepSize
          : 1;
    } else {
      this.getCardlistList(
        this.taskcontent.examId,
        this.taskcontent.assignmentConfigId
      );
    }

    // 初始化图片
    this.initImage();
    // 兼容火狐浏览器
    this.mousewheelevt = /Firefox/i.test(navigator.userAgent)
      ? "DOMMouseScroll"
      : "mousewheel";
    // 为空间区域绑定鼠标滚轮事件 =》 处理函数是wheelHandle
    // 如果你监听了window的scroll或者touchmove事件，你应该把passive设置为true，这样滚动就会流畅很多
    this.$refs.maskBox.addEventListener(this.mousewheelevt, this.wheelHandle);
    // this.value = this.paperCon.sourcename

    // 获取答题卡
    // this.dataCardlist(this.paperCon.groupid,this.paperCon.navid,this.paperCon.flagsourceid,0,this.paperCon.num,this.paperCon.sourcename)
    // this.backgroundColorlist = this.backgroundColorlist.filter(item=>item.color!=this.backgroundColor)
  },
  beforeDestroy() {
    //取消监听
    this.$refs.maskBox.removeEventListener(
      this.mousewheelevt,
      this.wheelHandle
    );
  },
  methods: {
    // 满分步长内容
    // 用步长和满分计算步长的倍数
    stepfullScore(maxScore, step) {
      let arr = [];
      for (let i = Number(step); i <= maxScore; i += Number(step)) {
        arr.push(i);
      }
      this.steplist = arr;
    },
    //获取进度(优化)
    async getProgressBox(examId, assignmentConfigId) {
      const obj = {
        examId: examId,
        assignmentConfig: assignmentConfigId,
      };
      try {
        const res = await statsReviewprogress(obj);
        if (res.code == 200) {
          // 确保 number
          this.questionProgress = res.data.completedTasks;
          this.questionTotal = res.data.planTasks;
        }
        return res;
      } catch (err) {
        console.error("getProgressBox error", err);
        return { code: 500 };
      }
    },
    async getCardlistList(id, assignmentConfigId) {
      this.taskimgIshow = true;
      let obj = {
        examId: id,
        assignmentConfigId: assignmentConfigId,
      };
      teacherreviewlist(obj)
        .then((res) => {
          try {
            if (res.code == 200) {
              const noData = !res.rows || res.rows.length == 0;

              if (!noData) {
                sessionStorage.setItem("tasklist", JSON.stringify(res.rows));
                this.taskCardcontent = res.rows;
                this.taskcardObject = res.rows[0];

                const firstRow = res.rows[0];
                const fullScore = firstRow.fullScore || 0;
                const rawStepSize = firstRow.stepSize;

                // Handle step size processing
                if (
                  rawStepSize &&
                  rawStepSize !== null &&
                  rawStepSize !== undefined
                ) {
                  if (
                    typeof rawStepSize === "string" &&
                    rawStepSize.includes(",")
                  ) {
                    this.steplistBox = rawStepSize
                      .split(",")
                      .map((item) => Number(item.trim()))
                      .filter((item) => !isNaN(item));
                    this.stepvalue = "—";
                  } else {
                    if (sessionStorage.getItem("step")) {
                      this.stepvalue = Number(sessionStorage.getItem("step"));
                    } else {
                      this.stepvalue = Number(rawStepSize) || 1;
                    }
                    // this.stepvalue = Number(rawStepSize) || 1;
                    this.stepfunction(fullScore, this.stepvalue);
                    this.stepfullScore(fullScore, rawStepSize);
                  }
                } else {
                  if (sessionStorage.getItem("step")) {
                    this.stepvalue = sessionStorage.getItem("step");
                  } else {
                    if (sessionStorage.getItem("step")) {
                      this.stepvalue = Number(sessionStorage.getItem("step"));
                    } else {
                      this.stepvalue = 1;
                    }
                  }
                  this.stepfunction(fullScore, this.stepvalue);
                  this.stepfullScore(fullScore, rawStepSize);
                }
                this.allscore = fullScore;
              } else {
                if (this.questionProgress < this.taskcontent.planTasks) {
                  this.nodefalutcardIshow = true;
                  questionCardTeacher({teacherId:this.taskcardObject.teacherId})
                  
                  return;
                }
                this.tasknumIshow = true;
                if (sessionStorage.getItem("step")) {
                  this.stepvalue = Number(sessionStorage.getItem("step"));
                } else {
                  this.stepvalue = 1;
                }
                this.stepfunction(0, this.stepvalue); // Assuming default fullScore of 0 when no data
              }

              this.getCardTime = new Date().getTime();
              this.getCarding = false;
            } else {
              // Assuming allTasksDone should come from props/data
              const allTasksDone = this.allTasksDone || false;
              if (allTasksDone) {
                this.tasknumIshow = true;
              } else {
                this.nodefalutcardIshow = true;
                questionCardTeacher({teacherId:this.taskcardObject.teacherId})
                
              }
            }
          } catch (error) {
            console.error("Error processing teacher review:", error);
            this.$message.error("获取答题卡失败");
          } finally {
            this.taskimgIshow = false;
          }
        })
        .catch((error) => {
          console.error("API call failed:", error);
          this.$message.error("请求答题卡失败");
          this.taskimgIshow = false;
        });
    },
    //打分步长方法
    stepfunction(end, step, start) {
      if (!start) {
        start = 0;
      }
      let newliststep = [];
      let i = start;
      for (; i < end; i += step) {
        newliststep.push(i);
      }
      if (i >= end) {
        newliststep.push(end);
      }
      this.steplistBox = newliststep;
    },
    //选择打分步长
    selectstepvale(val) {
      sessionStorage.setItem("step", val);
      this.stepvalue = val;
      this.stepfunction(this.taskcardObject.fullScore, val);
    },
    scoreSubmit() {
      if (
        this.getCarding ||
        (this.taskCardcontent.length == 1 &&
          this.getCardTime &&
          new Date().getTime() - this.getCardTime < 500) ||
        !this.taskcardObject.id
      ) {
        this.$modal.msgWarning("您点击的太频繁了~");
        return;
      }
      if (this.taskCardcontent.length == 1) {
        this.getCarding = true;
      }

      this.buttondisabled1 = 2;
      if (this.allscore != this.inputvalue) {
        let par = "1" + this.inputvalue;
        // console.info(par.length, "dddddd");
        if (par.length < 2) {
          // this.scoreAttentiontitle="得分未设置"
          this.$message.warning("得分未设置");
          // this.scoreAttention = true
          this.buttondisabled1 = 1;
          this.buttonDisabled = false;
          return false;
        }
        if (this.inputvalue > this.taskcardObject.fullScore) {
          this.$message.warning("得分超出满分限制");
          this.buttondisabled1 = 1;
          this.buttonDisabled = false;
          return false;
        }
        if (this.stepvalue === "—") {
          if (!this.steplistBox.includes(Number(this.inputvalue))) {
            this.$message.warning("得分不符合步长，当前步长为—");
            this.buttondisabled1 = 1;
            this.buttonDisabled = false;
            return false;
          }
        } else {
          if (Number(this.inputvalue) % Number(this.stepvalue) !== 0) {
            this.$message.warning(
              "得分不符合步长，当前步长为" + this.stepvalue
            );
            this.buttondisabled1 = 1;
            this.buttonDisabled = false;
            return false;
          }
        }
        let str = this.inputvalue.toString();
        let reg = /^[0-9]+(.[0-9]{1})?$/;
        if (str.indexOf(".") > -1) {
          if (reg.test(str)) {
            let reg1 = /^\d+\.5$/;
            if (!reg1.test(str)) {
              this.$message.warning("您输入的分值不符合规范");
              this.isToast = true;
              this.buttondisabled1 = 1;
              this.buttonDisabled = false;
              return false;
            }
          }
        }
        if (str.length > 1 && str.substr(0, 1) === 0) {
          // this.scoreAttention = true
          // this.scoreAttentiontitle="您输入的分值不符合规范"
          this.buttondisabled1 = 1;
          this.$message.warning("您输入的分值不符合规范");
          this.buttonDisabled = false;
          return false;
        }
      }

      let params = {
        id: this.taskcardObject.id,
        teacherId: this.taskcardObject.teacherId,
        score: this.inputvalue == 0 ? 0 : this.inputvalue,
      };
      teacherReviewAssignment(params).then(async (res) => {
        // console.info("ress", res);
        if (res.code == 200) {
          this.result = [];
          this.inputvalue = "";
          // this.$message.success('打分成功')
          await this.getProgressBox(
            JSON.parse(sessionStorage.getItem("taskContent")).examId,
            JSON.parse(sessionStorage.getItem("taskContent")).assignmentConfigId
          );
          if (this.questionProgress == this.questionTotal) {
            this.tasknumIshow = true;
            return;
          }
          const index = this.taskCardcontent.findIndex(
            (item) => item.id == this.taskcardObject.id
          );
          if (index !== -1) {
            // Remove the item if found
            this.taskCardcontent.splice(index, 1);
            // Save the updated array to local storage
            if (this.taskCardcontent.length > 0) {
              sessionStorage.setItem(
                "tasklist",
                JSON.stringify(this.taskCardcontent)
              );
            } else {
              sessionStorage.removeItem("tasklist");
              this.getCardlistList(
                JSON.parse(sessionStorage.getItem("taskContent")).examId,
                JSON.parse(sessionStorage.getItem("taskContent"))
                  .assignmentConfigId
              );
            }
          }
          if (sessionStorage.getItem("tasklist")) {
            this.taskcardObject = JSON.parse(
              sessionStorage.getItem("tasklist")
            )[this.taskIndex];
          } else {
            this.taskcardObject = [];
          }
          this.buttondisabled1 = 1;
        }
      });
    },
    //评阅列表
    reviewlistget() {
      let obj = {
        projectId: this.$route.query.projectId,
      };
      reviewListdate(obj).then((res) => {
        if (res.code == 200) {
          this.tasklisttop = res.data.rows;
        }
      });
    },
    //回评
    reviewHp() {
      window.open(
        "/reviewlist/index?projectId=" +
          this.$route.query.projectId +
          "&examName=" +
          this.$route.query.examName
      );
    },

    //满分0分 自动提交
    autosubmitmf(score, lf) {
      this.inputvalue = score;
      if (this.autoSubmit) {
        this.scoreSubmit();
      }
    },
    // 结束阅卷释放题型
    gobackyj() {
      this.$router.go(-1);
    },
    /**
     * 重置
     */
    handleReset() {
      this.imgW = 0;
      this.imgH = 0;
      this.top = 0;
      this.left = 0;
      this.deg = 0;
      this.scale = "scale(0.6)";
      this.size = 0;
      this.initImage();
    },
    /**
     * 获取图片的url
     * @param {string} url
     */
    getImgSize(url) {
      return new Promise((resolve, reject) => {
        let imgObj = new Image();
        imgObj.src = url;
        imgObj.onload = () => {
          resolve({
            width: imgObj.width,
            height: imgObj.height,
          });
        };
      });
    },
    /**
     * 初始化图片
     */
    async initImage() {
      this.imgH = window.innerHeight;
      this.imgW = window.innerWidth;

      let copiedData = Object.assign({}, this.imagesDimensions);
      if (this.taskcardObject.questionUrls == 0) {
        return;
      }
      let { width, height } = await this.getImgSize(this.cardreverse);
      // 设置原始图片的大小
      let realWidth = width;
      let realHeight = height;

      let widthimage;
      if (document.body.clientWidth > 1400) {
        widthimage = 1085;
      } else {
        widthimage = 885;
      }
      //  let realWidth = widthimage;
      //  let realWidth = window.innerWidth;
      setTimeout(() => {
        let realHeight = this.$refs.maskBox.clientHeight;

        // 获取高宽比例
        const whRatio = realWidth / realHeight;
        const hwRatio = realHeight / realWidth;

        //获取盒子的大小
        const boxW = window.innerWidth;
        const boxH = this.$refs.maskBox.clientHeight;

        if (realWidth >= realHeight) {
          this.imgH = hwRatio * boxW;
          const nih = this.imgH;
          if (nih > boxH) {
            this.imgH = boxH;
            this.imgW = whRatio * boxH;
          } else {
            this.imgW = boxW;
          }
          this.top = (boxH - this.imgH) / 2;
          this.left = (boxW - this.imgW) / 2;
        } else {
          this.imgW = (boxH / realHeight) * realWidth;
          this.imgH = boxH;
          this.left = (boxW - this.imgW) / 2;
        }
        if (sessionStorage.getItem("zoomScale")) {
          this.scale = sessionStorage.getItem("zoomScale");
          let leftTop = JSON.parse(sessionStorage.getItem("zoomDrag"));
          this.left = leftTop.left;
          this.top = leftTop.top;
        }
      }, 500);
    },
    imgScaleHandle(zoom) {
      // console.info(this.dragIshow)
      // if(this.dragIshow){
      if (sessionStorage.getItem("zoomScale")) {
        this.scale = JSON.parse(sessionStorage.getItem("zoomScale")).scale;
        this.size = JSON.parse(sessionStorage.getItem("zoomScale")).size;
      }
      this.size += zoom;
      if (this.size < 0) {
        this.size = 0;
      }
      this.scale = `scale(${0.6 + this.size}) rotateZ(${this.deg}deg)`;
      let params = {
        size: this.size,
        scale: this.scale,
      };
      sessionStorage.setItem("zoomScale", JSON.stringify(params));
      // }
    },
    /**
     * 鼠标滚动 实现放大缩小
     */
    wheelHandle(e) {
      this.toastText = "";
      this.isToast = false;
      e.preventDefault();
      const ev = e || window.event; // 兼容性处理 => 火狐浏览器判断滚轮的方向是属性 detail，谷歌和ie浏览器判断滚轮滚动的方向是属性 wheelDelta
      // dir = -dir; // dir > 0 => 表示的滚轮是向上滚动，否则是向下滚动 => 范围 (-120 ~ 120)
      const dir = ev.detail ? ev.detail * -120 : ev.wheelDelta;
      //滚动的数值 / 2000 => 表示滚动的比例，用此比例作为图片缩放的比例
      this.imgScaleHandle(dir / 2000);
    },
    /**
     * 处理图片拖动
     */
    onmousedownHandle(e) {
      this.toastText = "";
      this.isToast = false;
      const that = this;
      this.$refs.maskBox.onmousemove = (el) => {
        const ev = el || window.event; // 阻止默认事件
        ev.preventDefault();
        this.left += ev.movementX;
        this.top += ev.movementY;
        let params = {
          left: this.left,
          top: this.top,
        };
        sessionStorage.setItem("zoomDrag", JSON.stringify(params));
      };
      this.$refs.maskBox.onmouseup = () => {
        // 鼠标抬起时将操作区域的鼠标按下和抬起事件置为null 并初始化
        this.$refs.maskBox.onmousemove = null;
        this.$refs.maskBox.onmouseup = null;
      };
      if (e.preventDefault) {
        e.preventDefault();
      } else {
        return false;
      }
    },
    onmouseleaveHandle(e) {
      // 鼠标抬起时将操作区域的鼠标按下和抬起事件置为null 并初始化
      this.$refs.maskBox.onmousemove = null;
      this.$refs.maskBox.onmouseup = null;
    },
    // 设为问题卷方法提交
    errorcardReason(name, num) {
      this.carderrorClass = num;
      this.carderrorname = name;
    },

    //点击切图作文全图
    buttonqt() {
      sessionStorage.removeItem("zoomDrag");
      sessionStorage.removeItem("zoomScale");
      this.quntuIshow = !this.quntuIshow;
      this.markingHabit = true;
      this.scale = "scale(0.5)";
      this.left = 0;
      this.top = 0;
    },
    //获取题号
    getcardnumbers() {
      let params = {
        userId: this.userInfomation.id,
        sourcename: this.paperCon.sourcename3,
      };
      getcardNumber(params).then((res) => {
        if (res.code == 0) {
          this.tasklist = res.obj.sourcenames;
          this.totalvolume = res.obj.rmt.alltasknum;
          this.readvolume = res.obj.rmt.tasknum;
          this.setlist = res.obj.rmt;
          this.setlist = res.obj.rmt;
          // this.value = res.obj.rmt.sourcename3
          let obj = res.obj.sourcenames.filter((item) => {
            return item.sourcename3 == res.obj.rmt.sourcename3;
          });
          // console.info(obj)
          this.changeValue = obj[0].flagsourceid;
          this.changeNum = obj[0].num;
          this.value = res.obj.rmt.sourcename3;
          this.changeSourcename = obj[0].sourcename;
          this.groupid = res.obj.rmt.groupid;
          this.navid = res.obj.rmt.navid;
          this.taskMethods();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //步长
    step(num) {
      this.stepActive = num;
    },
    getX(obj) {
      var parObj = obj;
      var left = obj.offsetLeft;
      while ((parObj = parObj.offsetParent)) {
        left += parObj.offsetLeft;
      }
      return left;
    },

    getY(obj) {
      var parObj = obj;
      var top = obj.offsetTop;
      while ((parObj = parObj.offsetParent)) {
        top += parObj.offsetTop;
      }
      return top;
    },
    stepAddtjnum(e) {
      // 方法3
      var center_scrollTop = 0;
      let oDiv = document.getElementById("content_left");
      let tranTop = e.clientY - this.getY(oDiv) + oDiv.scrollTop + "px";
      let tranLeft =
        e.clientX - this.getX(oDiv) + document.body.scrollLeft + "px";

      if (this.stepActive == 0) {
        this.num = 0.5;
        if (parseFloat(this.inputvalue + this.num) >= 0) {
          this.stepNumber.push({
            scorenum: "+0.5",
            tranLeft: tranLeft,
            tranTop: tranTop,
          });
          this.inputvalue = parseFloat(this.inputvalue + this.num);
        } else {
          this.inputvalue = "";
          this.stepNumber = [];
          this.toastText =
            '<i class="el-icon-warning-outline"></i>当前的分数不合理';
          this.isToast = true;
        }
      } else if (this.stepActive == 1) {
        this.num = 1;
        if (parseFloat(this.inputvalue + this.num) >= 0) {
          this.stepNumber.push({
            scorenum: "+1",
            tranLeft: tranLeft,
            tranTop: tranTop,
          });
          this.inputvalue = parseFloat(this.inputvalue + this.num);
        } else {
          this.inputvalue = "";
          this.stepNumber = [];
          this.toastText =
            '<i class="el-icon-warning-outline"></i>当前的分数不合理';
          this.isToast = true;
        }
      } else if (this.stepActive == 2) {
        this.num = 2;
        if (parseFloat(this.inputvalue + this.num) >= 0) {
          this.stepNumber.push({
            scorenum: "+2",
            tranLeft: tranLeft,
            tranTop: tranTop,
          });
          this.inputvalue = parseFloat(this.inputvalue + this.num);
        } else {
          this.inputvalue = "";
          this.stepNumber = [];
          this.toastText =
            '<i class="el-icon-warning-outline"></i>当前的分数不合理';
          this.isToast = true;
        }
      } else if (this.stepActive == 3) {
        if (this.inputvalue != "") {
          this.num = 0.5;
          if (parseFloat(this.inputvalue - this.num) >= 0) {
            this.stepNumber.push({
              scorenum: "-0.5",
              tranLeft: tranLeft,
              tranTop: tranTop,
            });
            this.inputvalue = parseFloat(this.inputvalue - this.num);
          } else {
            this.inputvalue = "";
            this.stepNumber = [];
            this.toastText =
              '<i class="el-icon-warning-outline"></i>当前的分数不合理';
            this.isToast = true;
          }
        } else {
          this.toastText =
            '<i class="el-icon-success"></i>当前没有可扣分的分数';
          this.isToast = true;
        }
      } else if (this.stepActive == 4) {
        if (this.inputvalue != "") {
          this.num = 1;
          if (parseFloat(this.inputvalue - this.num) >= 0) {
            this.stepNumber.push({
              scorenum: "-1",
              tranLeft: tranLeft,
              tranTop: tranTop,
            });
            this.inputvalue = parseFloat(this.inputvalue - this.num);
          } else {
            this.inputvalue = "";
            this.stepNumber = [];
            this.toastText =
              '<i class="el-icon-warning-outline"></i>当前的分数不合理';
            this.isToast = true;
          }
        } else {
          this.toastText =
            '<i class="el-icon-success"></i>当前没有可扣分的分数';
          this.isToast = true;
        }
      } else if (this.stepActive == 5) {
        if (this.inputvalue != "") {
          this.num = 2;
          if (parseFloat(this.inputvalue - this.num) >= 0) {
            this.stepNumber.push({
              scorenum: "-2",
              tranLeft: tranLeft,
              tranTop: tranTop,
            });
            this.inputvalue = parseFloat(this.inputvalue - this.num);
          } else {
            this.stepNumber = [];
            this.inputvalue = "";
            this.toastText =
              '<i class="el-icon-warning-outline"></i>当前的分数不合理';
            this.isToast = true;
          }
        } else {
          this.toastText =
            '<i class="el-icon-success"></i>当前没有可扣分的分数';
          this.isToast = true;
        }
      } else {
        this.toastText = '<i class="el-icon-success"></i>您未选择步长';
        this.isToast = true;
      }
    },
    keydownTab(id) {
      this.keydownActive = id;
      this.result = [];
      this.inputvalue = "";
      this.stepNumber = [];
      this.buttonDisabled = false;
    },
    taskMethods(tk) {
      if (this.readvolume >= this.totalvolume) {
        let params = {
          sourceId: this.sourceid,
        };
        questionRelease(params).then((res) => {
          // console.info(res)
        });
        this.tasknumIshow = true;
        return false;
      } else {
        if (tk) {
          this.dataCardlist(
            this.groupid,
            this.navid,
            this.flagsourceid,
            this.sourceid,
            this.changeNum,
            this.changeValue
          );
        } else {
          this.dataCardlist(
            this.groupid,
            this.navid,
            this.flagsourceid,
            0,
            this.changeNum,
            this.changeValue
          );
        }
      }
      // })
      // 	}else{
      // 		this.$message.error(res.msg)
      // 	}
      // })
    },
    toastHide(data) {
      this.isToast = data;
    },
    toastHide1(data) {
      this.isToast1 = data;
    },
    getImageExtension(filename) {
      // 使用split方法根据点号分割字符串
      var parts = filename.split(".");
      // 后缀名是最后一个部分
      var extension = parts[parts.length - 1];
      return extension;
    },
    keyinputbox() {
      // console.info(this.keydownActive)
      this.result = [];
      this.inputvalue = "";
      this.stepNumber = [];
      if (this.keydownActive != 0) {
        this.autoSubmit = false;
      }
    },
    //得分板
    scoreNumber(score) {
      this.inputvalue = score;
      if (this.autoSubmit) {
        this.scoreSubmit();
      }
    },
    //九键
    nineClick(val, nr) {
      if (this.flag == 0) {
        this.inputvalue = "";
      }
      // 绑定监听事件
      window.addEventListener("keydown", this.keyDown);
      this.buttonDisabled = false;
      if (nr) {
        this.result = [];
        this.inputvalue = "";
      }

      if (this.result.length === 0 && val === ".5") {
        return false;
      }
      this.result.push(val);
      this.inputvalue = this.result.join("");
      if (this.inputvalue.indexOf(".5") != -1) {
        if (val === ".5") {
          this.buttonDisabled = true;
        } else {
          this.buttonDisabled = false;
          this.result = [];
          this.inputvalue = "";
          this.result.push(val);
          this.inputvalue = this.result.join("");
        }
      }
      if (this.result[0] == 0) {
        if (val != ".5") {
          this.result = [];
          this.inputvalue = "";
          this.result.push(val);
          this.inputvalue = this.result.join("");
          this.buttonDisabled = false;
        }
      }
      this.flag = 1;
    },

    //删除
    nineDel() {
      this.result = [];
      this.inputvalue = "";
      this.stepNumber = [];
      this.buttonDisabled = false;
    },
    //选择题号
    inputSelect(e) {
      // let taskContent = this.tasklisttop.filter((item) => item.id == e);
      // sessionStorage.setItem("taskContent", JSON.stringify(taskContent[0]));
      // this.getCardlistList(
      //   taskContent[0].examId,
      //   taskContent[0].assignmentConfigId
      // );
      // this.getProgressBox({
      //   examId: taskContent[0].examId,
      //   assignmentConfig: taskContent[0].assignmentConfigId,
      // });
    },
    // 倒计时
    countTime() {
      // 获取当前时间
      let date = new Date();
      let now = date.getTime();
      // 设置截止时间
      let endDate = new Date(this.curStartTime); // this.curStartTime需要倒计时的日期
      let end = endDate.getTime();
      // 时间差
      let leftTime = end - now;
      // 定义变量 d,h,m,s保存倒计时的时间
      if (leftTime >= 0) {
        // 天
        this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        // 时
        let h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
        this.hour = h < 10 ? "0" + h : h;
        // 分
        let m = Math.floor((leftTime / 1000 / 60) % 60);
        this.min = m < 10 ? "0" + m : m;
        // 秒
        let s = Math.floor((leftTime / 1000) % 60);
        this.second = s < 10 ? "0" + s : s;
      } else {
        this.day = 0;
        this.hour = "00";
        this.min = "00";
        this.second = "00";
      }
      // 等于0的时候不调用
      if (
        Number(this.hour) === 0 &&
        Number(this.day) === 0 &&
        Number(this.min) === 0 &&
        Number(this.second) === 0
      ) {
        return;
      } else {
        // 递归每秒调用countTime方法，显示动态时间效果,
        setTimeout(this.countTime, 1000);
      }
    },
    //下一题
    scoreSet1() {
      this.scoreSubmit();
    },
    // 回车登录
    keyDown(e) {
      if (e.keyCode == 13 || e.keyCode == 108) {
        // this.tjiaoElementu();
        if (this.buttondisabled1 == 1) {
          this.scoreSubmit();
        }
      }
      if (e.keyCode == 8 || e.keyCode == 46) {
        this.result = [];
      }
      if (this.flag == 1) {
        this.inputvalue = "";
        this.result = [];
      }
      this.flag = 0;
    },
    inited(viewer) {
      this.$viewer = viewer;
    },
    show() {
      this.imgBigshow = true;
      this.$viewer.show();
    },
    //标记试卷
    bjpaper() {
      this.carderrorIshow = true;
    },
    sureButton() {
      if (this.carderrorname !== "") {
        // this.scoreSubmit()
        let obj = {
          id: this.taskcardObject.id,
          markerTeacherId: this.taskcardObject.teacherId,
          markerType: this.carderrorname,
        };
        editabnormal(obj).then((res) => {
          // console.info(obj,'obj')
          if (res.code == 200) {
            this.carderrorIshow = false;
            this.carderrorname = "";
            this.$message.success("设置问题卷成功");
            const index = this.taskCardcontent.findIndex(
              (item) => item.id == this.taskcardObject.id
            );
            if (index !== -1) {
              // Remove the item if found
              this.taskCardcontent.splice(index, 1);
              // Save the updated array to local storage
              if (this.taskCardcontent.length > 0) {
                sessionStorage.setItem(
                  "tasklist",
                  JSON.stringify(this.taskCardcontent)
                );
              } else {
                sessionStorage.removeItem("tasklist");
                this.getCardlistList(
                  this.taskcontent.examId,
                  this.taskcontent.assignmentConfigId
                );
              }
            }
            this.taskcardObject = JSON.parse(
              sessionStorage.getItem("tasklist")
            )[this.taskIndex];
          }
        });
      } else {
        this.$message.error("请勾选问题类别");
      }
    },
    //设置为优秀
    excellent() {
      this.toastText = '<i class="el-icon-success"></i>设为优秀成功';
      this.isToast = true;
      this.tasktype = 3;
    },
    //答案解析
    answerjx() {
      this.answerIshow = !this.answerIshow;
    },
    //修正
    correct() {
      this.correctIshow = true;
    },
    //关闭修正弹窗
    correctcancel() {
      this.correctIshow = false;
    },
    //跳过
    skip() {
      const index = this.taskCardcontent.findIndex(
        (item) => item.id == this.taskcardObject.id
      );
      if (index !== -1) {
        // Remove the item if found
        this.taskCardcontent.splice(index, 1);
        // Save the updated array to local storage
        if (this.taskCardcontent.length > 0) {
          sessionStorage.setItem(
            "tasklist",
            JSON.stringify(this.taskCardcontent)
          );
        } else {
          sessionStorage.removeItem("tasklist");
          this.getCardlistList(
            this.taskcontent.examId,
            this.taskcontent.assignmentConfigId
          );
        }
      }
      this.taskcardObject = JSON.parse(sessionStorage.getItem("tasklist"))[
        this.taskIndex
      ];
      this.inputvalue = "";
      this.stepNumber = [];
    },
    //零分，满分
    zeroScore(val) {
      this.inputvalue = val;
    },
    //阅卷完成跳到阅卷列表
    closeLinkMarklist() {
      this.$router.push(
        "/tasklist?projectId=" +
          this.$route.query.projectId +
          "&examName=" +
          this.$route.query.examName
      );
    },
    nodefalutcardClose() {
      this.$router.push(
        "/tasklist?projectId=" +
          this.$route.query.projectId +
          "&examName=" +
          this.$route.query.examName
      );
    },
    tjiaoElementu(yu) {
      let that = this;
      this.buttondisabled1 = 2;
      if (this.userInfomation != {}) {
        let params = {};
        if (this.tasktype == 2) {
          params = {
            sourceId: this.sourceid,
            score: 0,
            userId: this.userInfomation.id,
            tasktype: this.tasktype,
            causeofex: this.carderrorname ? this.carderrorname : undefined,
          };
          this.tasktype = "";
        } else if (this.tasktype == "") {
          let par = "1" + this.inputvalue;
          if (par.length < 2) {
            // this.scoreAttentiontitle="得分未设置"
            this.toastText = "得分未设置";
            this.isToast = true;
            // this.scoreAttention = true
            this.buttondisabled1 = 1;
            this.buttonDisabled = false;
            return false;
          }
          if (this.inputvalue > this.allscore) {
            // this.scoreAttention = true
            // this.scoreAttentiontitle="得分超出满分限制"
            this.toastText = "得分超出满分限制";
            this.isToast = true;
            this.buttondisabled1 = 1;
            this.buttonDisabled = false;
            return false;
          }
          let str = this.inputvalue.toString();
          let reg = /^[0-9]+(.[0-9]{1})?$/;
          if (str.indexOf(".") > -1) {
            if (reg.test(str)) {
              let reg1 = /^\d+\.5$/;
              if (!reg1.test(str)) {
                // this.scoreAttention = true
                // this.scoreAttentiontitle="您输入的分值不符合规范"
                this.toastText = "您输入的分值不符合规范";
                this.isToast = true;
                this.buttondisabled1 = 1;
                this.buttonDisabled = false;
                return false;
              }
            }
          }
          if (str.length > 1 && str.substr(0, 1) === 0) {
            // this.scoreAttention = true
            // this.scoreAttentiontitle="您输入的分值不符合规范"
            this.buttondisabled1 = 1;
            this.toastText = "您输入的分值不符合规范";
            this.isToast = true;
            this.buttonDisabled = false;
            return false;
          }
          params = {
            sourceId: this.sourceid,
            score: this.inputvalue == 0 ? 0 : this.inputvalue,
            userId: this.userInfomation.id,
            tasktype: 1,
          };
        } else {
          let par = "1" + this.inputvalue;
          if (par.length < 2) {
            // this.scoreAttentiontitle="得分未设置"
            this.toastText = "得分未设置";
            this.isToast = true;
            // this.scoreAttention = true
            this.buttondisabled1 = 1;
            this.buttonDisabled = false;
            return false;
          }
          if (this.inputvalue > this.allscore) {
            // this.scoreAttention = true
            // this.scoreAttentiontitle="得分超出满分限制"
            this.toastText = "得分超出满分限制";
            this.isToast = true;
            this.buttondisabled1 = 1;
            this.buttonDisabled = false;
            return false;
          }
          let str = this.inputvalue.toString();
          let reg = /^[0-9]+(.[0-9]{1})?$/;
          if (str.indexOf(".") > -1) {
            if (reg.test(str)) {
              let reg1 = /^\d+\.5$/;
              if (!reg1.test(str)) {
                // this.scoreAttention = true
                // this.scoreAttentiontitle="您输入的分值不符合规范"
                this.toastText = "您输入的分值不符合规范";
                this.isToast = true;
                this.buttondisabled1 = 1;
                this.buttonDisabled = false;
                return false;
              }
            }
          }
          if (str.length > 1 && str.substr(0, 1) === 0) {
            // this.scoreAttention = true
            // this.scoreAttentiontitle="您输入的分值不符合规范"
            this.toastText = "您输入的分值不符合规范";
            this.isToast = true;
            this.buttondisabled1 = 1;
            this.buttonDisabled = false;
            return false;
          }
          params = {
            sourceId: this.sourceid,
            score: this.inputvalue == 0 ? 0 : this.inputvalue,
            userId: this.userInfomation.id,
            tasktype: this.tasktype,
            causeofex: this.carderrorname ? this.carderrorname : undefined,
          };
        }
        // let data={
        // 	sourcename:this.value,
        // 	userId:this.userInfomation.id,
        // }
        // getcardNumber1(data).then(res=>{
        // this.readvolume = res.obj
        if (this.readvolume >= this.totalvolume) {
          let paramss = {
            sourceId: this.sourceid,
          };
          questionRelease(paramss).then((release) => {
            // console.info(release)
          });
          this.tasknumIshow = true;
          return false;
        } else {
          setMarkScore(params).then((score) => {
            if (score.code == 0) {
              this.tasknumIshow = false;
              // if(!yu){
              // 	console.info('ddd1')
              this.taskMethods();

              this.buttondisabled1 = 1;
              this.stepNumber = [];
              this.scoreAttention = false;
              this.toastText = "";
              this.isToast = false;
              this.buttonDisabled = false;
              // this.toastText = '<i class="el-icon-success"></i>提交成功'
              // this.isToast=true
              this.result = [];
              this.inputvalue = "";
              // this.readvolume+=1
              let obj = {
                uid: this.uid,
                num: this.readvolume,
                sourcename: Number(this.changeValue),
              };
              getTaskNum(obj).then((items) => {
                this.readvolume = items;
                sessionStorage.setItem("count", this.readvolume);
              });
              if (sessionStorage.getItem("zoomScale")) {
                this.scale = JSON.parse(
                  sessionStorage.getItem("zoomScale")
                ).scale;
                let leftTop = JSON.parse(sessionStorage.getItem("zoomDrag"));
                this.left = leftTop.left;
                this.top = leftTop.top;
              }
              this.carderrorIshow = false;
              this.carderrorClass = -1;
              this.carderrorname = "";
              // console.info(relist)
              // console.info(sessionrelist)
              // console.info(sessionrelist.concat(relist))
              // }else{
              // 	this.tasknumIshow = true
              // }
            } else {
              if (score.code === 1 && score.msg === "此题已阅") {
                // console.info('此题已阅dddddddd',score.code,score.msg)
                this.tasknumIshow = false;
                this.toastText = "此题已阅";
                this.isToast = true;
                this.taskMethods();
                this.buttondisabled1 = 1;
                this.stepNumber = [];
                this.scoreAttention = false;
                this.buttonDisabled = false;
                this.result = [];
                this.inputvalue = "";
                this.carderrorIshow = false;
                this.carderrorClass = -1;
              } else {
                // console.info('sss')
                this.buttondisabled1 = 1;
                this.buttonDisabled = false;
                this.$message.error(score.msg);
              }
            }
          });
        }
        // })
      }
      // }
      // })
    },
    // 实时获取input值
    onlyNonNegative(e) {
      //清除“数字”和“.”以外的字符
      this.inputvalue = e.replace(/[^\d.]/g, "");
      //只保留第一个. 清除多余的
      this.inputvalue = e.replace(/\.{2,}/g, ".");
      this.inputvalue = e
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      //只能输入一个小数
      this.inputvalue = e.replace(/^(\-)*(\d+)\.(\d).*$/, "$1$2.$3");
      //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02
      if (e.indexOf(".") < 0 && e != "") {
        this.inputvalue = parseFloat(e);
      }
    },
    proving(e) {
      // this.form.skus[e].Price 是input的值
      // 先把非数字的都替换掉，除了数字和.
      this.inputvalue = this.inputvalue.replace(/[^\d.]/g, "");
      // 必须保证第一个为数字而不是.
      this.inputvalue = this.inputvalue.replace(/^\./g, "");
      // 保证只有出现一个.而没有多个.
      this.inputvalue = this.inputvalue.replace(/\.{2,}/g, "");
      // 保证.只出现一次，而不能出现两次以上
      this.inputvalue = this.inputvalue
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      let index = -1;
      for (let i in this.inputvalue) {
        if (this.inputvalue[i] === ".") {
          index = i;
        }
        if (index !== -1) {
          if (i - index > 1) {
            this.inputvalue = this.inputvalue.substring(
              0,
              this.inputvalue.length - 1
            );
          }
        }
      }
    },
    // 切换退出全屏
    toggleFullscreen() {
      const element = this.$refs.fullscreenElement;
      if (!document.fullscreenElement) {
        // 当前没有元素处于全屏状态，尝试使目标元素全屏
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
          // Firefox
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          // Chrome, Safari, Opera
          element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
          // IE/Edge
          element.msRequestFullscreen();
        }
      } else {
        // 已经有元素处于全屏状态，退出全屏
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }
      this.$forceUpdate();
    },
    handleFullscreenChange() {
      // 全屏状态变化后，更新 el-select
      this.$nextTick(() => {
        // 这里可以添加代码来更新或重绘 el-select
        // 例如，短暂地更改其 display 属性以触发重绘
        const elSelect = this.$refs.yourElSelectRef; // 替换为你的 el-select 的 ref
        if (elSelect) {
          elSelect.style.display = "none";
          setTimeout(() => {
            elSelect.style.display = "block";
          }, 0);
        }
      });
    },
    //答案
    answerClick() {},
    updateDivScale() {
      // 计算新的缩放比例
      // 假设我们以150为基准，即sliderValue=150时，比例为1
      const scale = 1 + this.sliderValue / 500;
      // console.info(this.sliderValue + "-***************************");

      // 更新div的缩放样式
      this.divStyle.transform = `scale(${scale})`;
    },
    measureTextWidth(text, font) {
      const element = document.createElement("span");
      element.style.position = "absolute";
      element.style.whiteSpace = "nowrap";
      element.style.visibility = "hidden";
      element.style.font = font;
      element.innerText = text;
      document.body.appendChild(element);
      const width = element.offsetWidth;
      document.body.removeChild(element);
      return width;
    },
    // Method to update select width
    updateSelectWidth(visible) {
      if (visible) {
        // Wait for the next tick to ensure the options are rendered
        this.$nextTick(() => {
          let maxWidth = 0;
          this.keywordTablist.forEach((option) => {
            const width = this.measureTextWidth(option.name, "12px Arial"); // Adjust font to match el-select
            if (width > maxWidth) {
              maxWidth = width;
            }
          });
          // Add some padding to the width
          this.selectWidth = maxWidth + 54;
        });
      }
    },
    backgroundClick(color) {
      this.backgroundColorIshow = false;
      this.backgroundColor = color;
    },
    qhcolor() {
      this.backgroundColorlist = [
        {
          name: "浅灰",
          color: "#f5f5f5",
        },
        {
          name: "护眼",
          color: "#e6f2e8",
        },
        {
          name: "浅蓝",
          color: "#e4e8f1",
        },
        {
          name: "浅黄",
          color: "#f1f2e4",
        },
        {
          name: "浅红",
          color: "#efe4e2",
        },
        {
          name: "暗夜",
          color: "#333333",
        },
      ];
      this.backgroundColorIshow = true;
      this.backgroundColorlist = this.backgroundColorlist.filter(
        (item) => item.color != this.backgroundColor
      );
    },
    footernavClick() {
      this.footerrightnavIshow = true;
    },
    footernavClick1() {
      this.footerrightnavIshow = false;
    },
    carderrorishowfalse() {
      this.carderrorIshow = false;
      this.carderrorname = "";
    },
    onImageLoad(index) {
      // 确保图片已经加载完成
      this.$nextTick(() => {
        const img = this.$refs.imgWh[index]; // 获取对应的图片DOM元素
        if (img) {
          const width = img.naturalWidth; // 获取图片的原始宽度
          const height = img.naturalHeight; // 获取图片的原始高度
          // 将宽高存储到imagesDimensions数组中
          this.$set(this.imagesDimensions, index, { width, height });
        }
        const maskBox = this.$refs.maskBox;
        const images = maskBox.querySelectorAll("img");
        if (this.imagesDimensions.length == 1) {
          if (
            this.imagesDimensions[0].height > this.imagesDimensions[0].width
          ) {
            images.forEach((img) => {
              img.classList.remove(
                "twoimage",
                "threeimage",
                "onceimage",
                "twoimagewidth"
              );
              img.classList.add("heightwimage");
            });
          } else {
            images.forEach((img) => {
              img.classList.remove("twoimage", "threeimage", "twoimagewidth");
              img.classList.add("onceimage");
            });
          }
        }
        if (this.imagesDimensions.length == 2) {
          if (!this.quntuIshow) {
            images.forEach((img) => {
              img.classList.remove("onceimage", "threeimage", "twoimage");
              img.classList.add("twoimagewidth");
            });
          } else {
            // console.info(this.imagesDimensions[1])
            if (
              this.imagesDimensions[0].height > this.imagesDimensions[0].width
            ) {
              images.forEach((img) => {
                img.classList.remove(
                  "onceimage",
                  "threeimage",
                  "twoimagewidth",
                  "twoimage"
                );
                img.classList.add("heightwimage");
              });
            }
            if (
              this.imagesDimensions[1].height < this.imagesDimensions[1].width
            ) {
              images.forEach((img) => {
                img.classList.remove(
                  "onceimage",
                  "threeimage",
                  "twoimagewidth",
                  "heightwimage"
                );
                img.classList.add("twoimage");
              });
            } else {
              // console.info('ddddddd')
              images.forEach((img) => {
                img.classList.remove(
                  "onceimage",
                  "threeimage",
                  "twoimagewidth"
                );
                img.classList.add("twoimage");
              });
            }
          }
        }
        if (this.imagesDimensions.length == 3) {
          if (
            this.imagesDimensions[0].height > this.imagesDimensions[0].width &&
            this.quntuIshow
          ) {
            images.forEach((img) => {
              img.classList.remove(
                "twoimage",
                "threeimage",
                "onceimage",
                "twoimagewidth"
              );
              img.classList.add("heightwimage");
            });
          } else {
            images.forEach((img) => {
              img.classList.remove(
                "onceimage",
                "twoimage",
                "twoimagewidth",
                "heightwimage"
              );
              img.classList.add("twoimage");
            });
          }
        }
      });
    },
    //左侧菜单拖拽
    handleDragging(e) {
      this.isDragging = false;
    },
    handleDragStop(e) {
      this.isDragging = true;
    },
    handleClicked() {},
    handleActivated() {},
    //右侧菜单拖拽
    handleDragging1(e) {
      this.isDragging = false;
      this.dragXscoll = e.left + 16;
      this.dragYscoll = e.top - 22;
    },
    handleDragStop1(e) {
      this.isDragging = true;
      if (
        this.startTime &&
        Math.abs(this.initialdragXscoll - (e.left + 16)) < 2 &&
        Math.abs(this.initialdragYscoll - (e.top - 22)) < 2 &&
        new Date().getTime() - this.startTime < 1000
      ) {
        this.scoreNumber(this.score);
      } else {
        this.dragXscoll = e.left + 16;
        this.dragYscoll = e.top - 22;
        this.$refs.myInput.focus();
      }
    },
    handleClicked1(e) {
      if (e.target && e.target.dataset.item) {
        this.score = e.target.dataset.item;
        this.startTime = new Date().getTime();
        this.initialdragXscoll = this.dragXscoll;
        this.initialdragYscoll = this.dragYscoll;
      } else {
        this.score = null;
        this.startTime = null;
      }
    },
    handleActivated1() {},
    updatePositionOnResize(e) {
      this.resizeX = e.target.innerWidth - 260;
      this.resizeY = 83;
      this.parentWidth = e.target.innerWidth;
      this.parentHeight = e.target.innerHeight;
      this.paramWidth = e.target.innerWidth;
      this.paramHeight = e.target.innerHeight - 56;
      this.imgH = e.target.innerHeight - 81;
      this.imgW = e.target.innerWidth;
    },
    handleMouseEnter() {
      this.isHovered = true;
    },
    handleMouseLeave() {
      this.timer = setTimeout(() => {
        this.isHovered = false;
      }, 500);
    },
    handleMouseEnters() {
      clearTimeout(this.timer);
    },
    handleMouseLeaves() {
      this.isHovered = false;
    },
    handleDisabledClick() {
      this.toastText = "自动提交已开启，当前状态输入框已禁用";
      this.isToast = true;
    },
  },
  destroyed() {
    // 销毁事件
    window.removeEventListener("keydown", this.keyDown, false);
    window.removeEventListener("resize", this.updatePositionOnResize, false);
    sessionStorage.removeItem("tasklist");
    sessionStorage.removeItem("step");
  },
  components: { VueDragResize, Reviewlist },
  watch: {},
  computed: {
    pageTitle() {
      let data = "";
      let item = this.tasklisttop.find((item) => {
        return item.id == this.mytasklistid;
      });
      if (item) {
        data =
          item.projectName + "/" + item.examName + "-" + item.questionNumbers;
      }
      return data;
    },
  },
};
</script>

<style scoped>
.markgingBox {
  width: 100vw;
  height: 100vh;
  overflow: hidden !important;
}

.imageAttention {
  position: absolute;
  left: 50%;
  top: 80px;
  font-size: 14px;
  color: #b3b8c2;
  transform: translateX(-50%);
  z-index: 8;
  font-weight: bold;
  letter-spacing: 1px;
}

.topHeadcontent {
  height: 56px;
  background: #1a48db;
  padding: 0 24px;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topHeadcontent >>> .el-input__inner {
  background: none;
  border: none;
  color: #fff;
  height: 56px;
  line-height: 56px;
  padding-left: 5px;
}

.topHeadcontent >>> .el-select {
  width: 300px;
}

.topHeadcontent >>> .el-input__suffix {
  display: none;
}

.topHeadcontent >>> .el-select-dropdown__item.hover,
.topHeadcontent >>> .el-select-dropdown__item:hover {
  background: none;
  color: #1a48db;
}

.topHeadcontent >>> .el-select-dropdown__item {
  color: #8e96a4;
}

.topHeadcontent >>> .el-select-dropdown__item.selected {
  color: #1a48db;
}

.topHeadcontent >>> .el-select-dropdown {
  border-radius: 0px 0px 20px 20px !important;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.07);
}

.selectboxNumber {
  display: flex;
  align-items: center;
}

.selectboxNumber img {
  margin-right: 5px;
}

.selectboxNumber >>> .el-select .el-select__caret,
.selectboxNumber >>> .el-select-dropdown .el-select__caret {
  background: url("../../assets/images/marknew/jt.png") no-repeat center;
}

.selectboxNumber >>> .el-icon-arrow-up:before {
  display: none;
}

.fullscreenquite {
  display: flex;
  align-items: center;
}

.fullscreenquite p {
  display: flex;
  align-items: center;
  width: 140px;
  height: 34px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 17px;
  border: 1px solid #ffffff;
  font-size: 18px;
  color: #fff;
  justify-content: center;
  cursor: pointer;
}

.fullscreenquite p img {
  margin-right: 8px;
}

.fullscreenquite span {
  width: 76px;
  height: 34px;
  background: #ffffff;
  border-radius: 17px;
  border: 1px solid #ffffff;
  font-size: 18px;
  color: #1a48db;
  text-align: center;
  line-height: 34px;
  margin-left: 24px;
  cursor: pointer;
}

.leftnavMenu {
  box-sizing: border-box;
  width: 75px;
  height: 300px;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding-top: 14px;
  /* position:fixed;
		left:25px;
		top:120px; */
  cursor: grab;
  z-index: 2000;
  user-select: none;
  /* 禁止选择文本 */
}

.leftnavMenu:active {
  cursor: grabbing;
}

.leftnavMenu b {
  display: block;
  width: 42px;
  height: 4px;
  background: #dee1e7;
  border-radius: 2px;
  margin: 0 auto;
}

.leftnavMenu ul {
  margin-top: 14px;
}

.leftnavMenu ul li {
  text-align: center;
  position: relative;
  color: #5b6371;
  padding-bottom: 14px;
  margin-bottom: 14px;
  cursor: pointer;
  font-size: 12px;
}

.leftnavMenu ul li::before {
  content: "";
  width: 24px;
  height: 1px;
  background: #eee;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.leftnavMenu ul li:nth-child(3):before {
  content: "";
  width: 24px;
  height: 1px;
  background: #eee;
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
}

.leftnavMenu ul li:last-child::before {
  content: "";
  width: 24px;
  height: 1px;
  background: none;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.leftnavMenu ul li:last-child {
  padding-top: 14px;
}

.leftnavMenu ul li span {
  display: block;
  font-size: 16px;
  color: #5b6371;
}

.leftnavMenu ul li img.backgroundcircle {
  border-radius: 100px;
}

.leftnavMenu ul li.backgroundclassColor span {
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0 auto 4px;
}

.leftnavMenu ul li.backgroundclassColor span i {
  width: 16px;
  height: 16px;
  background: #f5f5f5;
  border-radius: 100px;
  position: absolute;
  left: 2px;
  top: 2px;
}

.leftnavMenu ul li.backgroundclassColor {
  position: relative;
  height: 40px;
}

.leftnavMenu ul li.backgroundclassColor div.backgroundset {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  transform: translateX(-50%);
}

.leftnavMenu ul li.backgroundclassColor div.secondbox {
  box-sizing: border-box;
  display: flex;
  width: 290px;
  border: 1px solid #dee1e7;
  position: absolute;
  left: 2px;
  top: -10px;
  transition: opacity width 0.5s;
  overflow: hidden;
  height: 60px;
  background: #eff1f4;
  border-radius: 6px;
  z-index: 1;
  padding-left: 70px;
}

.leftnavMenu ul li.backgroundclassColor div.secondbox p em {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 20px;
  margin-right: 10px;
  border: solid 1px #5b6371;
  margin: 0 auto 3px;
}

.leftnavMenu ul li.backgroundclassColor div.secondbox p {
  width: 42px;
}

.updownpinjie span img {
  transform: rotate(90deg);
}

.rightnavMenuBox {
  /* position:fixed; */
  display: flex;
  z-index: 100;
  right: 25px;
  top: 120px;
}

.rightnavMenu {
  width: 240px;
  height: auto;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.24);
  border-radius: 2px;
  padding-top: 5px;
  transition: transform 0.1s ease;
}

.rightnavMenu b.gzcolor {
  display: block;
  width: 42px;
  height: 4px;
  background: #dee1e7;
  border-radius: 2px;
  margin: 0 auto;
}

.rightnavMenu >>> .el-slider__container {
  height: 300px;
  /* 与slider的max值一致，确保滑块有足够的空间 */
}

/* 可选：为滑块添加样式 */
.rightnavMenu >>> .el-slider__button {
  width: 20px;
  /* 滑块按钮的宽度 */
  height: 40px;
  /* 滑块按钮的高度 */
  /* 根据需要添加其他样式 */
}

.rightnavMenu >>> .el-input__inner {
  border: none;
  color: #000;
  max-width: 110px;
}

.rightnavMenu >>> .el-select {
  position: relative;
}

.rightnavMenu >>> .el-select::after {
  content: "";
  position: absolute;
  right: 10px;
  /* Adjust according to your design */
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  /* Adjust width as needed */
  height: 8px;
  /* Adjust height as needed */
  background: url(../../assets/images/marknew/jtblack.png) no-repeat center
    center;
  background-size: contain;
  pointer-events: none;
  /* Prevent click events on the arrow */
}

/* Optional: Hide the default arrow */
.rightnavMenu >>> .el-select .el-select__caret {
  display: none;
}

.allscoreprogress {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 0 15px;
  border-bottom: 1px solid #eff1f4;
  padding-bottom: 7px;
  margin-bottom: 7px;
}

.allscoreprogress span {
  display: inline-block;
  width: 55px;
  min-height: 20px;
  background: rgba(246, 112, 35, 0.08);
  border-radius: 2px;
  color: #f67023;
  padding: 0 5px;
  line-height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.allscoreprogress p {
  min-height: 20px;
  background: rgba(35, 121, 246, 0.08);
  border-radius: 2px;
  color: #1a48db;
  padding: 0 5px;
  line-height: 20px;
  width: calc(100% - 80px);
}

.stepbcboxlist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: none;
  font-size: 12px;
  height: 25px;
}

.stepbcboxlist >>> .el-input__inner {
  height: 25px;
  line-height: 25px;
  background: rgba(202, 206, 215, 0.24);
  border-radius: 4px;
  border: 1px solid #caced7;
  padding: 0 5px;
}

.scoreStep {
  box-sizing: border-box;
  max-height: 165px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  margin: 5px auto 0;
  position: relative;
}

.scoreStep div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
}

.scoreStep div.displaynone {
  display: none;
}

/*滚动条区域*/
.scoreStep::-webkit-scrollbar {
  width: 2px;
  background-color: #fff;
}

/*滚动条*/
.scoreStep::-webkit-scrollbar-thumb {
  background-color: #4076dd;
  border-radius: 50px;
}

/*滚动条外层轨道*/
.scoreStep::-webkit-scrollbar-track {
  /* -webkit-box-shadow: inset 0 0 1px ; */
  background-color: #eee;
  border-radius: 50px;
}

.scoreStep ul {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}

.scoreStep ul li {
  box-sizing: border-box;
  width: 29px;
  height: 29px;
  background: #1a48db;
  border-radius: 4px;
  text-align: center;
  line-height: 29px;
  font-size: 12px;
  cursor: pointer;
  color: #fff;
  margin-right: 6px;
  margin-top: 4px;
}

.scoreStep ul li >>> .el-button {
  box-sizing: border-box;
  width: 29px;
  height: 29px;
  background: #1a48db;
  border-radius: 4px;
  text-align: center;
  line-height: 29px;
  font-size: 12px;
  cursor: pointer;
  color: #fff;
  margin: 0;
  padding: 0;
  border: none;
}

.scoreStep ul li:nth-child(6n) {
  margin-right: 0;
}

.scoreStep ul li.deleteColor {
  background: rgba(246, 50, 35, 0.2);
  border-radius: 4px;
  border: 1px solid #f63223;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stepbcbox {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 5px 15px 8px;
  font-size: 14px;
  border-bottom: 1px solid #eff1f4;
}

.stepbcbox >>> .el-select {
  margin-left: 3px;
}

.stepbcboxlist >>> .el-switch__label * {
  font-size: 12px;
}

.addScorejs {
  border-bottom: 1px solid #eff1f4;
  padding-bottom: 12px;
}

.addScorejs p {
  font-size: 12px;
  color: #b3b8c2;
  text-align: center;
}

.stepButton {
  display: flex;
  padding: 0 15px;
  align-items: center;
  margin-top: 14px;
  justify-content: space-between;
}

.stepButton span {
  display: block;
  border: solid 1px #eee;
  font-size: 16px;
  cursor: pointer;
  width: 45px;
  height: 25px;
  border-radius: 6px;
  line-height: 25px;
  text-align: center;
}

.stepButton b {
  display: block;
  font-size: 12px;
}

.stepButtonColorRed span {
  font-size: 12px;
  color: rgba(246, 50, 35, 0.8);
  border: 1px solid rgba(246, 50, 35, 0.8);
}

.stepButtonColorGreen span {
  font-size: 12px;
  color: rgba(56, 164, 12, 0.8);
  border: 1px solid rgba(56, 164, 12, 0.8);
}

.stepButtonColorRed span.hover,
.stepButtonColorRed span:hover {
  background: rgb(246, 50, 35);
  color: #fff;
}

.stepButtonColorGreen span.hover,
.stepButtonColorGreen span:hover {
  background: rgb(56, 164, 12);
  color: #fff;
}

.ninelist {
  box-sizing: border-box;
  padding: 0 15px 14px;
  border-bottom: 1px solid #eff1f4;
}

.scoreButtonset {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 15px 14px;
  border-bottom: 1px solid #eff1f4;
}

.scoreButtonset >>> .el-input {
  width: 130px;
  height: 30px;
  background: rgba(239, 241, 244, 0.84);
  border-radius: 4px;
  border: 1px solid #dee1e7;
  margin-top: 4px;
}

.scoreButtonset >>> .el-input__inner {
  height: 30px;
  line-height: 30px;
  background-color: rgba(239, 241, 244, 0.84);
  max-width: 100%;
  text-align: center;
}

.scoreButtonset p.scorePset {
  box-sizing: border-box;
  width: 29px;
  height: 29px;
  border-radius: 4px;
  text-align: center;
  line-height: 29px;
  font-size: 12px;
  cursor: pointer;
  margin-right: 6px;
  margin-top: 4px;
}

.scoreButtonset p.scorepbackground1 {
  background: rgba(246, 50, 35, 0.2);
  border-radius: 4px;
  border: 1px solid #f63223;
  color: #f63223;
  margin-left: 8px;
}

.scoreButtonset p.scorepbackground2 {
  background: rgba(35, 121, 246, 0.2);
  border-radius: 4px;
  border: 1px solid #1a48db;
  color: #1a48db;
  margin-right: 0;
}

.scoreButtonset p.scorepbackground3 {
  background: rgba(246, 112, 35, 0.2);
  border-radius: 4px;
  border: 1px solid #f67023;
  color: #f67023;
  font-size: 12px;
  width: 53px;
  height: 29px;
  line-height: 29px;
  margin-right: 6px;
  text-align: center;
  margin-top: 8px;
  cursor: pointer;
}

.scoreButtonset p.scorepbackground4 {
  background: #f63223;
  border-radius: 4px;
  border: 1px solid #f63223;
  color: #fff;
  font-size: 12px;
  width: 69px;
  height: 29px;
  line-height: 29px;
  margin-right: 6px;
  text-align: center;
  margin-top: 8px;
}

.scoreButtonset p.scorepbackground5 {
  background: #1a48db;
  border-radius: 4px;
  border: 1px solid #1a48db;
  color: #fff;
  font-size: 12px;
  width: 70px;
  height: 29px;
  line-height: 29px;
  text-align: center;
  margin-top: 8px;
  cursor: pointer;
}

.submitskipbox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px 15px;
}

.submitskip {
  background: #fff;
  border-radius: 4px;
  border: 1px solid #1a48db;
  color: #1a48db;
  font-size: 12px;
  width: 53px;
  height: 29px;
  line-height: 29px;
  text-align: center;
  margin-top: 8px;
  cursor: pointer;
}

.submitbuttonWidth {
  width: 150px;
  height: 29px;
  font-size: 12px;
  line-height: 29px;
  text-align: center;
  margin-top: 8px;
  color: #fff;
  border-radius: 4px;
}

.submitbuttongray {
  background: #999;
  border: solid 1px #999;
}

.submitbuttonBlue {
  background: #1a48db;
  padding: 0;
  border: solid 1px #1a48db;
}

.footerqhdiv {
  width: 100%;
  height: 36px;
  background: rgba(35, 121, 246, 0.06);
  border-radius: 0px 0px 4px 4px;
  line-height: 36px;
  font-size: 12px;
  color: #1a48db;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.footerqhdiv span {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.footerqhdiv span img {
  margin-left: 5px;
}

.main {
  box-sizing: border-box;
  margin: 0 auto;
  background: #f3f5f7;
  overflow: hidden;
}

.content {
  margin: 0 auto;
}

.content_left {
  box-sizing: border-box;
  flex: 1;
  position: relative;
  padding: 0;
  margin-right: 0px;
  overflow-y: auto;
}

.content_left img {
  object-fit: contain;
}

.watchMap {
  width: 100%;
  height: calc(100vh - 56px);
  position: relative;
}

.imgBox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.imgBox .divimage {
  box-sizing: border-box;
  cursor: move;
  position: absolute;
  justify-content: center;
  display: table;
  transform-origin: 50% 50%;
  display: flex;
  padding-top: 25px;
}

.imgBox .divimage1 {
  box-sizing: border-box;
  cursor: move;
  position: absolute;
  justify-content: center;
  align-items: center;
  display: table;
  transform-origin: 50% 50%;
  display: block;
  padding-top: 25px;
}

.onceimage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.twoimage {
  width: 35%;
  height: auto;
}

.threeimage {
  width: 28%;
}

.heightwimage {
  width: auto;
  height: 90%;
}

.twoimagewidth {
  width: 30%;
}

.messagebox1 {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
  border-radius: 9px;
}

.messageContent1 {
  width: 412px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  background: #fff;
  border-radius: 5px;
  padding: 0 20px 23px;
}

.messageContent1 >>> .el-radio {
  margin-top: 15px;
}

.messageContent1 h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  text-align: center;
  padding: 0;
  margin: 0;
  padding-top: 15px;
}

.messageContent1 h3 p i {
  color: #e37318;
  display: inline-block;
  margin-right: 5px;
  font-style: normal;
  font-size: 20px;
}

.messageContent1 h3 i {
  font-weight: bold;
  color: #919191;
  cursor: pointer;
}

.messagecontentts1 {
  padding: 0;
  line-height: 1.8;
}

.messagecontentts1 p {
  font-size: 12px;
  color: #9b9b9b;
  padding: 0;
  margin: 0;
}

.messagecontentts1 p i {
  display: inline-block;
  color: #ff9959;
  font-size: 16px;
  margin-right: 5px;
}

.messagecontentts1 ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.messagecontentts1 ul li {
  width: 84px;
  height: 34px;
  line-height: 34px;
  border-radius: 8px;
  font-size: 14px;
  border: solid 1px rgba(16, 16, 16, 1);
  margin-right: 15px;
  margin-top: 15px;
  text-align: center;
  cursor: pointer;
}

.messagecontentts1 ul li:hover,
.messagecontentts1 ul li.hover {
  border: solid 1px #0f36bd;
  color: #0f36bd;
}

.messageContent1 .buttonSet {
  display: flex;
  text-align: center;
  justify-content: right;
  padding-top: 20px;
}

.messageContent1 .buttonSet span {
  cursor: pointer;
  font-size: 14px;
  margin-right: 10px;
}

.messageContent1 .buttonSet span:first-child {
  width: 60px;
  height: 32px;
  border-radius: 3px;
  background: #e7e7e7;
  line-height: 32px;
  color: #000000;
  text-align: center;
}

.messageContent1 .buttonSet span:last-child {
  width: 88px;
  height: 32px;
  border-radius: 3px;
  background: #0052d9;
  line-height: 32px;
  color: #ffffff;
  text-align: center;
}

.footerScore {
  width: 830px;
  display: flex;
  justify-content: left;
  align-items: center;
  height: 70px;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.24);
  border-radius: 4px;
  position: fixed;
  left: 50%;
  bottom: 14px;
  background: #fff;
  transform: translateX(-50%);
}

.footerscoredz {
  display: block;
  width: 4px;
  height: 42px;
  background: #dee1e7;
  border-radius: 4px;
  margin-left: 14px;
}

.addscoretitle {
  font-size: 16px;
  color: #5b6371;
  display: block;
  width: 48px;
  margin: 0 14px;
}

.youyibutton {
  display: block;
  width: 76px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #1a48db;
  font-size: 16px;
  color: #1a48db;
  line-height: 40px;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.youyibutton::before {
  content: "";
  width: 1px;
  height: 24px;
  background: #dee1e7;
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
}

.dqjd {
  min-width: 200px;
  height: 30px;
  background: rgba(35, 121, 246, 0.08);
  border-radius: 4px;
  font-size: 16px;
  color: #1a48db;
  text-align: center;
  line-height: 30px;
  margin-left: 28px;
}

.manfenelinput {
  width: 121px;
  height: 42px;
  border-radius: 4px;
  margin-left: 14px;
}

.footerScore >>> .el-input__inner {
  background: rgba(239, 241, 244, 0.84);
  border: 1px solid #dee1e7;
  text-align: center;
  font-size: 16px;
  height: 100%;
}

.footerScore .scorePset {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  cursor: pointer;
  margin-right: 14px;
}

.footerScore .scorepbackground1 {
  background: rgba(246, 50, 35, 0.2);
  border-radius: 4px;
  border: 1px solid #f63223;
  color: #f63223;
  margin-left: 8px;
  cursor: pointer;
}

.footerScore .scorepbackground2 {
  background: rgba(35, 121, 246, 0.2);
  border-radius: 4px;
  border: 1px solid #1a48db;
  color: #1a48db;
  margin-right: 0;
  cursor: pointer;
}

.footerScore .scorepbackground4 {
  background: #f63223;
  border-radius: 4px;
  border: 1px solid #f63223;
  color: #fff;
  font-size: 16px;
  width: 96px;
  height: 40px;
  line-height: 40px;
  margin-left: 14px;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.footerScore .scorepbackground4::before {
  content: "";
  width: 1px;
  height: 24px;
  background: #dee1e7;
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
}

.footerScore .scorepbackground3 {
  background: rgba(246, 112, 35, 0.2);
  border-radius: 4px;
  border: 1px solid #f67023;
  color: #f67023;
  font-size: 16px;
  width: 76px;
  height: 40px;
  line-height: 40px;
  margin-right: 14px;
  text-align: center;
  margin-left: 26px;
  cursor: pointer;
}

.footerScore .submitskip {
  background: #fff;
  border-radius: 4px;
  border: 1px solid #1a48db;
  color: #1a48db;
  font-size: 16px;
  width: 76px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-top: 0;
  cursor: pointer;
}

.footerScore .submitbuttonWidth {
  width: 150px;
  height: 40px;
  font-size: 16px;
  line-height: 40px;
  text-align: center;
  margin-top: 0px;
  color: #fff;
  border-radius: 4px;
  margin-left: 14px;
}

.boxInputvalue {
  position: absolute;
  right: 380px;
  top: 50px;
  font-size: 84px;
  color: #ff0000;
  z-index: 99;
  font-family: "微软雅黑";
}

.rightnavMenu >>> .el-select-dropdown {
  position: absolute !important;
  top: 35px !important;
  left: 0px !important;
}

.drageBackground {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 1000;
  opacity: 0;
}

.vdr.active:before {
  display: none;
}

.vdr-stick {
  display: none;
}

.block {
  width: 165px;
}

.boxsclider {
  box-sizing: border-box;
  width: 205px;
  height: 16px;
  background: #ffffff;
  border-radius: 11px;
  position: fixed;
  display: flex;
  align-items: center;
  padding: 0 10px;
  z-index: 1001;
}

.boxsclider img {
  width: 12px;
}

.block >>> .el-slider__runway {
  margin: 0 0 0 8px;
}

.block >>> .el-slider__button-wrapper {
  display: block;
}

.block >>> .el-slider__button {
  width: 6px;
  height: 6px;
  border: 1px solid #409eff;
}

.dqprogressList {
  font-size: 14px;
  color: #fff;
}

/* //步长 */

.stepDiv {
  position: absolute;
  color: red;
  font-size: 20px;
  z-index: 1000;
}

.totalnum {
  position: absolute;
  right: 0;
  top: 0px;
  font-size: 28px;
  color: red;
}

.keywordTab {
  border-top: solid 1px #eee;
  width: 90%;
}

.keywordTab ul {
  display: flex;
  border: solid 1px #619cf5;
  height: 40px;
  border-radius: 5px;
}

.keywordTab ul li {
  flex: 1;
  color: #619cf5;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

.keywordTab ul li.hover {
  background: #619cf5;
  color: #fff;
}

.buttonBoxscore {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  padding: 20px 15px;
}

.buttonBoxscore button {
  cursor: pointer;
}

.buttonBoxscore button:first-child {
  background: #ffffff;
  width: 70px;
  height: 40px;
  border: 1px solid #f29018;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 400;
  color: #f29018;
  line-height: 40px;
}

.buttonBoxscore button:nth-child(2) {
  width: 70px;
  height: 40px;
  border: 1px solid #3874ff;
  background: #ffffff;
  border: 1px solid #3874ff;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 400;
  color: #3874ff;
  line-height: 40px;
}

.buttonBoxscore button:nth-child(3) {
  width: 98px;
  height: 40px;
  background: #3874ff;
  border-radius: 5px;
  font-size: 14px;
  color: #ffffff;
  line-height: 40px;
  border: none;
  padding: 0;
}

.buttonBoxscore div {
  width: 98px;
  height: 40px;
  background: #999;
  border-radius: 5px;
  font-size: 14px;
  color: #ffffff;
  line-height: 40px;
  border: none;
  padding: 0;
  text-align: center;
}

.markingContentInfo {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  height: 60px;
  border-bottom: solid 1px #eee;
  padding: 0 18px;
}

.markingContentInfo ul {
  display: flex;
}

.markingContentInfo ul li {
  display: flex;
}

.mciLeft {
  display: flex;
  align-items: center;
}

.yuejuanTitle {
  width: 100px;
  height: 42px;
  background: #ffffff;
  border: 2px solid #f5a761;
  border-radius: 0px;
  text-align: center;
  line-height: 42px;
  font-weight: normal;
  font-size: 14px;
  color: #f5a761;
  margin-right: 30px;
}

.mciLeft p {
  margin-right: 30px;
}

.viewBox {
  padding: 15px;
  position: relative;
}

.viewBox img {
  /* border:solid 2px #619CF5; */
}

.borderBottomtitle {
  display: flex;
  height: 60px;
  border-bottom: solid 1px #eee;
  align-items: center;
  padding: 0 18px;
}

.djsTime {
  /* color:#FF1919; */
  text-align: center;
}

.scoreSet {
  background-color: rgba(255, 210, 210, 100);
  font-size: 14px;
  color: #ff1919;
  width: 85%;
  height: 30px;
  line-height: 30px;
  margin: 15px auto 0;
  text-align: center;
}

.tjnext {
  display: block;
  width: 84%;
  height: 60px;
  background: #619cf5;
  border: none;
  font-size: 18px;
  color: #fff;
  margin: 15px auto 0;
  cursor: pointer;
  border-radius: 6px;
}

.answerContent {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  left: 0;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.answerContent img {
  width: auto;
  height: auto;
}

.correctButton {
  display: flex;
}

.correctButton button:nth-child(1) {
  background: #e8ac39;
}

.correctButton button:nth-child(2) {
  margin-left: 10px;
}

.messagebox {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
}

.messageContent {
  width: 450px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  background: #fff;
  border-radius: 5px;
  padding: 0 15px 30px;
}

.messageContent h3 {
  padding-top: 10px;
  line-height: 50px;
  text-align: center;
  border-bottom: 1px solid rgba(187, 187, 187, 100);
}

.messagecontentts {
  padding: 20px;
  line-height: 1.8;
  text-align: center;
}

.rightBorder {
  display: flex;
  align-items: center;
}

.successMarkingBox,
.nodefaultcardBox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
}

.smbContent,
.nodefaultContent {
  width: 300px;
  padding: 40px 30px;
  border-radius: 6px;
  background: #fff;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10001;
}

.smbContent span,
.nodefaultContent span {
  display: block;
  font-size: 16px;
  line-height: 1.6;
}

.smbContent b,
.nodefaultContent b {
  display: block;
  font-size: 14px;
  width: 100px;
  height: 36px;
  border-radius: 4px;
  background: #619cf5;
  margin: 20px auto 0;
  line-height: 36px;
  color: #fff;
  cursor: pointer;
}
</style>
